<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>购物系统-注册页面</title>
    <link th:href="@{webjars/bootstrap/5.1.3/css/bootstrap.css}" rel="stylesheet">
    <link th:href="@{css/ms-common.css}" rel="stylesheet">
</head>
<body>

    <nav th:replace="common/topbar.html"></nav>
    <div th:replace="common/ms-toast.html"></div>

    <div class="container mt-3">
        <div class="row">
        <div class="col-md-6">
        <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fku.90sjimg.com%2Felement_origin_min_pic%2F18%2F08%2F15%2F910c631eff13526ca7ddb8ada859e5ed.jpg&refer=http%3A%2F%2Fku.90sjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661970744&t=6449ba0c2393d4755b4f9e88e7fe8206">
        </div>
            <div class="col-md-6 col-sm-12 shadow p-5 ">
                <h5 class="text-center placeholder">注册</h5>
                <form id="ms-form-register">
                <ul class="ms-ul list-unstyled">
                    <!-- 1 用户账号 -->
                    <li>
                        <div class="form-floating">
                            <input name="usercode" type="text" class="form-control placeholder" id="ms-form-reg-code" placeholder="账号">
                            <label for="ms-form-reg-code">账号</label>
                            <div class="valid-feedback">
                                提示: 格式正确!
                            </div>
                            <div id="ms-form-reg-check-code-fail" class="invalid-feedback">
                                提示: 账号要求长度在5~10之间，且只能包含数字、字母和下划线
                            </div>
                        </div>
                    </li>
                    <!-- 2 用户密码 -->
                    <li>
                        <div class="form-floating">
                            <input name="password" type="password" class="form-control placeholder" id="ms-form-reg-password" placeholder="密码">
                            <label for="ms-form-reg-password">密码</label>
                            <div class="valid-feedback">
                                提示: 格式正确!
                            </div>
                            <div id="ms-form-reg-check-password-fail" class="invalid-feedback">
                                提示: 密码格式要求
                            </div>
                        </div>
                    </li>
                    <!-- 3 用户确认密码 -->
                    <li>
                        <div class="form-floating">
                            <input type="password" class="form-control placeholder" id="ms-form-reg-password-second" placeholder="确认密码">
                            <label for="ms-form-reg-password-second">确认密码</label>
                            <div class="valid-feedback">
                                提示: 格式正确!
                            </div>
                            <div id="ms-form-reg-check-password-second-fail" class="invalid-feedback">
                                提示: 两次输入的密码不一致
                            </div>
                        </div>
                    </li>
                    <!-- 4 用户联系电话 -->
                    <li>
                        <div class="form-floating">
                            <input name="tel" type="text" class="form-control placeholder" id="ms-form-reg-tel" placeholder="联系电话">
                            <label for="ms-form-reg-tel">联系电话</label>
                            <div class="valid-feedback">
                                提示: 格式正确!
                            </div>
                            <div id="ms-form-reg-check-tel-fail" class="invalid-feedback">
                                提示: 联系方式必须为11位电话号码
                            </div>
                        </div>
                    </li>
                    <!-- 5 用户邮箱 -->
                    <li>
                        <div class="form-floating">
                            <input name="email" type="text" class="form-control placeholder" id="ms-form-reg-email" placeholder="邮箱">
                            <label for="ms-form-reg-email">邮箱</label>
                            <div class="valid-feedback">
                                提示: 格式正确!
                            </div>
                            <div id="ms-form-reg-check-email-fail" class="invalid-feedback">
                                提示: 联系方式必须为11位电话号码
                            </div>
                        </div>
                    </li>
                    <!-- 6 用户验证码 -->
                    <li class="row">
                        <div class="col-md-4 text-end">
                            <button id="ms-btn-send-code" type="button" class="btn btn-info mt-2 placeholder" onclick="send_email_code('ms-btn-send-code')">发送验证码</button>
                        </div>
                        <div class="form-floating col-md-8">
                            <input name="emailCode" type="text" class="form-control w-50 placeholder" id="ms-form-reg-email-check" placeholder="Password">
                            <label for="ms-form-reg-email-check">验证码</label>
                        </div>
                    </li>
                    <!-- 注册按钮 -->
                    <li class="text-center">
                        <button id="ms-btn-reg" class="btn btn-primary w-50 placeholder" type="button" onclick="ms_register('ms-btn-reg')">
                            注册
                        </button>
                    </li>
                </ul>
                </form>
                <div class="text-end"><a href="/">去登录</a></div>
            </div>
        </div>
    </div>
    <!-- 引入第三方 JS 脚本文件 -->
    <script th:src="@{webjars/jquery/3.3.1/jquery.js}" type="text/javascript"></script>
    <script th:src="@{webjars/bootstrap/5.1.3/js/bootstrap.bundle.js}" type="text/javascript"></script>
    <!-- 引入自定义的 JS 脚本文件 -->
    <script src="/js/common/ms-config.js" th:src="@{/js/common/ms-config.js}" type="text/javascript"></script>
    <script src="/js/common/ms-toast.js" th:src="@{/js/common/ms-toast.js}" type="text/javascript"></script>
    <script src="/js/common/ms-random.js" th:src="@{/js/common/ms-random.js}" type="text/javascript"></script>
    <script src="/js/common/ms-btn.js" th:src="@{/js/common/ms-btn.js}" type="text/javascript"></script>
    <script src="/js/user/ms-register.js" th:src="@{/js/user/ms-register.js}" type="text/javascript"></script>

</body>
<footer>
    <div th:replace="common/footer.html"></div>
</footer>
</html>